import { observer } from 'mobx-react-lite'
import { FC } from 'react'
import { useOutlet } from 'react-router-dom'
import { CSSTransition, SwitchTransition } from 'react-transition-group'

import Header from '@/layouts/header/Header'
import LockScreen from '@/layouts/lock/LockScreen'

import { useStore } from './store'

const App: FC = () => {
  const currentOutlet = useOutlet()

  const { interactive } = useStore()

  if (interactive.locked) {
    return <LockScreen />
  }

  return (
    <>
      <Header />
      <SwitchTransition>
        <CSSTransition
          key={location.pathname}
          timeout={300}
          classNames="page"
          unmountOnExit
        >
          {() => <div className="page">{currentOutlet}</div>}
        </CSSTransition>
      </SwitchTransition>
    </>
  )
}

export default observer(App)
